<template>
  <div>
    <Header :left="true" leftText="返回" title="设备状态维护" />
    <div v-if="dropList != [] && dropList.length > 0" style="margin-top: 65px;">
      <DropdownMenu>
        <DropdownItem v-model="dpIndex" :options="dropList" @change="dropChange" />
      </DropdownMenu>
      <!-- <PullRefresh v-model="isLoading" @refresh="onRefresh"> -->
      <div class="textScroll">
        <div class="van-card">
          <div v-for="(equip, index) in equipListSelect" :key="index">
            <div v-if="equip.areaKey == dropList[dpIndex].text">
              <div style="width:100%;background-color: #F3F4F8;height:5px;"><span></span></div>
              <div class="van-card__header">
                <div class="van-card__thumb">
                  <div :class="equip.eqStatus ? 'card' : 'card_gray'">
                    <!-- <div :class="card"> -->
                    <br />
                    <VanSwitch
                      :value="equip.eqStatus == 'true' ? true : false"
                      @input="onInput(index, equip)"
                      size="20"
                    />
                  </div>
                </div>

                <div class="van-card__content">
                  <div class="van-card__desc">
                    序号：{{ index + 1 }}
                    <Button
                      class="buttonright"
                      color="#2a5caa"
                      @click="onOpenTimeSelect(index)"
                      style="font-size:10px"
                      >预约</Button
                    >

                    <Button
                      v-if="equip.appointment != null ? true : false"
                      class="buttonright"
                      color="#f58220"
                      @click="concelAppointment(index)"
                      >取消</Button
                    >
                  </div>
                  <div class="van-card__desc">设备编码：{{ equip.equipCode }}</div>
                  <div class="van-card__desc">设备名称：{{ equip.equipName }}</div>
                  <div class="van-card__desc">车间：{{ equip.areaKey }}</div>
                  <div class="van-card__desc" style="color:red;" v-show="equip.eqStatus == 'true' ? false : true">
                    预约开机时间：{{ equip.appointment }}
                  </div>
                  <div class="van-card__desc" style="color:red;" v-show="equip.eqStatus == 'true' ? true : false">
                    预约关机时间：{{ equip.appointment }}
                  </div>
                  <div class="van-card__desc">
                    设备状态：
                    <Badge
                      :content="equip.eqStatus == 'true' ? '运行中' : '已停机'"
                      :color="equip.eqStatus == 'true' ? '#138087' : '#797979'"
                    ></Badge>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Button
          block
          class="buttonDown"
          color="#138087"
          @click="saveEquipConfirmDialog"
          >确认</Button
        >
      </div>
    </div>
    <van-popup v-model="sourceShowPicker" round position="bottom">
      <van-datetime-picker
        v-model="selectDate"
        type="datetime"
        title="选择开始时间"
        :columns="columns"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirmEnd"
        @cancel="sourceShowPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  NoticeBar,
  Badge,
  PullRefresh,
  DropdownMenu,
  DropdownItem,
  Button,
  Toast,
  Switch as VanSwitch,
  Dialog,
  DatetimePicker,
  popup,
} from 'vant'
Vue.use(DatetimePicker)
Vue.use(popup)
import Header from '@/components/header.vue'
import { _httpClient } from '@/libs/api'
export default {
  name: 'equip_status_manage',
  components: { Button, Header, Badge, PullRefresh, NoticeBar, DropdownMenu, DropdownItem, Toast, VanSwitch, Dialog },
  data() {
    return {
      curentArea: null,
      selectDate: null,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 10, 1),
      sourceShowPicker: false,
      index: null,
      dpIndex: 0,
      isLoading: false,
      dropList: [],
      equipList: [],
      equipListSelect: [],
      checked: true,
    }
  },
  created() {
    this.queryList()
    this.minDate = new Date(new Date().getFullYear() - 3, 0, 1)
    this.maxDate = new Date(new Date().getFullYear() + 3, 0, 1)
  },
  methods: {
    onOpenTimeSelect(index) {
      this.index = index
      this.selectDate = new Date()
      this.sourceShowPicker = true
    },
    //预约取消
    concelAppointment(index) {
      let that = this
      that.index = index
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认取消预约时间？',
          theme: 'round-button',
      })
        .then(() => {
          that.updateAppointment(null, that.index)
        })
        .catch(() => {
          that.index = null
        })
    },
    //结束时间确认
    onConfirmEnd(date) {
      let that = this
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认预约设备开机/关机时间？',
          theme: 'round-button',
      })
        .then(() => {
          that.updateAppointment(date, that.index)
        })
        .catch(() => {
          that.index = null
          that.selectDate = null
          that.sourceShowPicker = false
        })
    },
    formatDate(date) {
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let min = date.getMinutes()
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      if (day < 10) {
        day = '0' + day
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (min < 10) {
        min = '0' + min
      }
      return year + '-' + mouth + '-' + day + ' ' + hour + ':' + min + ':' + '00'
    },
    onInput(index, equip) {
      let _this = this
      let msg = equip.eqStatus == 'true' ? '关闭' : '开启'
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认' + msg + '设备？',
          theme: 'round-button',
      })
        .then(() => {
          if (_this.equipListSelect[index].eqStatus == 'true') {
            _this.equipListSelect[index].eqStatus = 'false'
          } else {
            _this.equipListSelect[index].eqStatus = 'true'
          }
          _this.updateStatus(_this.equipListSelect[index])
        })
        .catch(() => {
          // on cancel
        })
    },
    dropChange(value) {
      this.dpIndex = value
      this.equipListSelect = []
      this.curentArea = this.dropList[value].text
      for (let i = 0; i < this.equipList.length; i++) {
        if (this.equipList[i].areaKey == this.dropList[value].text) {
          this.equipListSelect.push(this.equipList[i])
        }
      }
    },
    onRefresh() {
      this.queryList()
      this.isLoading = false
    },
    //更新设备预约时间
    async updateAppointment(date, index) {
      if (date != null) {
        this.equipListSelect[index].appointment = this.formatDate(date)
      } else {
        this.equipListSelect[index].appointment = null
      }

      let equip = this.equipListSelect[index]
      this.index = null
      this.selectDate = null
      this.sourceShowPicker = false
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: '请稍等...',
      })
      let that = this
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/equip/check/updateEquipAppointment', {
          body: equip,
        })
        Toast.clear()
        if (res.code === 200) {
          Toast.success(res.msg)
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
    //更新设备状态
    async updateStatus(equip) {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: '请稍等...',
      })
      let that = this
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/equip/check/updateEquip', { body: equip })
        Toast.clear()
        if (res.code === 200) {
          Toast.success(res.msg)
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
    saveEquipConfirmDialog() {
      let that = this
      Dialog.confirm({
        title: '系统提示',
        message: '是否已确认' + that.curentArea + '设备状态？',
          theme: 'round-button',
      })
        .then(() => {
          that.saveEquipConfirmLog()
        })
        .catch(() => {
          // on cancel
        })
    },
    //记录设备去人日志
    async saveEquipConfirmLog() {
      let log = { area: this.curentArea }
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: '请稍等...',
      })
      let that = this
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/equip/check/saveEquipConfirmLog', {
          body: log,
        })
        Toast.clear()
        if (res.code === 200) {
          Toast.success(res.msg)
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
    async queryList() {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: '请稍等...',
      })
      let that = this
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/equip/check/getEquipList', {})
        Toast.clear()
        if (res.code === 200) {
          if (res.areaList) {
            let arr = []
            for (let i = 0; i < res.areaList.length; i++) {
              arr.push({ text: res.areaList[i], value: i })
            }
            that.dropList = arr
            that.curentArea = that.dropList[0].text
            that.equipList = res.equipList
            that.equipListSelect = []
            for (let i = 0; i < that.equipList.length; i++) {
              if (that.equipList[i].areaKey == that.dropList[0].text) {
                that.equipListSelect.push(that.equipList[i])
              }
            }
          } else {
            Toast.fail('没有找到相关设备！')
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },
  },
}
</script>

<style>
.card {
  text-align: center;
  height: 60px;
  width: 100%;
  margin: auto;
  padding: 2px;
  /* background:#DCDCDC; */
  color: #ffffff;
  opacity: 0.3;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.card_gray {
  text-align: center;
  height: 60px;
  width: 100%;
  margin: auto;
  color: #ffffff;
  opacity: 0.3;
  padding: 2px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.van-card {
  height: 800px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  color: #323233;
  font-size: 15px;
  background-color: white;
}

.van-card__header {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  background-color: white;
}

.van-card__thumb {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  justify-content: center;
  align-items: center;
  flex: none;
  width: 72px;
  height: 75px;
  margin-right: 18px;
  margin-top: 10px;
}

.van-card__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-width: 0;
  min-height: 75px;
}

.van-card__desc {
  max-height: 20px;
  color: #646566;
  line-height: 20px;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 7rem;
  bottom: 0rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  z-index: 1;
}

.buttonright {
  margin-right: 5px;
  float: right;
  right: 5px;
  width: 55px;
  height: 30px;
  font-size: 12px;
}
.buttonDown {
  position: fixed;
  right: 5px;
  bottom: 10px;
  width: 100px;
  height: 40px;
  font-size: 12px;
}
</style>
